<template>
    <div class="values-page">
        <!-- 顶部banner -->
        <div class="top-banner banner h-[678px] bg-[#F4FAF9] py-[60px]">
            <div class="w-[1200px] mx-auto flex flex-col items-center">
                <div class="text-[42px] mb-[40px] animate-trigger">
                    每个人都是独特的个体
                </div>
                <div
                    w-full
                    class="text-[14px] text-[#666] leading-[1.8] px-[75px] animate-trigger"
                >
                    每个人的基因、生活方式、饮食习惯和健康状况各不相同，这导致相同的膳食营养补充剂对不同个体的效果差异巨大。传统的营养补充方案通常以"平均需求"为基准，忽视了个体差异。艾斯康的个性化营养定制则通过基因分析、健康数据、健康问卷、功能医学分析等多种科学方法，根据不同人群、不同体质，结合不同生活饮食习惯、不同健康需求，制定个性化的精准营养方案。
                </div>
            </div>
            <!-- <div
                class="absolute right-0 bottom-0 w-[600px] h-[280px] bg-[#e0e0e0]"
            ></div> -->
        </div>

        <!-- 数据统计 -->
        <div
            class="statistics-section flex w-[1200px] mx-auto justify-between items-center my-[80px] gap-[88px]"
        >
            <div
                v-for="(item, index) in statisticsList"
                :key="index"
                class="text-center flex h-[60px] gap-[10px] animate-trigger"
            >
                <div
                    class="text-[48px] font-bold text-[#4CAF50] flex items-start"
                >
                    <span font-stretch-expanded>{{
                        animatedNumbers[index]
                    }}</span>
                    <span class="text-[20px]">{{ item.unit }}</span>
                </div>
                <div
                    class="text-[24px] text-[#262626] mt-[4px] flex flex-col items-start justify-between"
                >
                    {{ item.text }}
                    <span class="text-[16px] text-[#999]">
                        {{ item.label }}
                    </span>
                </div>
            </div>
        </div>

        <!-- 粉剂优势 -->
        <div class="bg-[#fff] py-[60px]">
            <div
                class="w-[1200px] mx-auto text-[#262626] flex items-center gap-[80px]"
            >
                <div class="w-[600px] h-[380px] bg-[#e0e0e0] animate-trigger">
                    <img w-full h-full :src="h_1" alt="" />
                </div>
                <div class="flex-1 animate-trigger">
                    <div class="text-[32px] font-600 mb-[20px]">粉剂的优势</div>
                    <div class="mt-[20px] mb-[40px]">
                        10倍的活性成分，满足您更高的健康需求
                    </div>
                    <div class="text-[14px] leading-[1.8]">
                        10倍的活性成分，满足您更多的健康需求。通过特殊的微囊化技术和包埋技术，实现从传统的药片剂型到粉剂的转变，让产品更加容易被人体吸收利用，确保更好的吸收率。
                    </div>
                </div>
            </div>
        </div>

        <!-- 定制优势 -->
        <div class="py-[60px]">
            <div
                class="w-[1200px] text-[#262626] mx-auto flex items-center gap-[80px]"
            >
                <div class="flex-1 animate-trigger">
                    <div class="text-[32px] font-600 mb-[20px]">
                        我们的定制优势
                    </div>
                    <div class="mt-[20px] mb-[40px]">
                        以“疾病发生机制”为后盾的个性化定制
                    </div>
                    <div class="text-[14px] leading-[1.8]">
                        我们创建了一个包含超过3万个生化数据点的专有数据库。这使我们能够将您的生理数据转化为独特的配方，以满足您的健康需求
                    </div>
                </div>
                <div class="w-[600px] h-[380px] bg-[#e0e0e0] animate-trigger">
                    <img w-full h-full :src="h_2" alt="" />
                </div>
            </div>
        </div>

        <!-- 植物成分 -->
        <div class="bg-[#F4FAF9] py-[60px]">
            <div class="w-[1200px] mx-auto">
                <div class="text-center mb-[58px] animate-trigger">
                    <div class="text-[32px] font-500">500+植物成分</div>
                    <div class="text-[14px] mt-[20px] mb-[40px] text-[#262626]">
                        品质保证，专利认证
                    </div>
                    <div class="text-[14px] text-[#262626] leading-[1.8]">
                        100%不含人工添加剂。从源头到你手上，透明是我们的坚持。甄选全球顶级供应商，确保专业级成分的质量和功效，每种配方均不含硬脂酸镁或二氧化钛
                    </div>
                </div>
                <div class="grid grid-cols-7 gap-[48px]">
                    <div v-for="item,i in list" :key="i">
                        <div
                            class="w-[130px] h-[130px] bg-[#e0e0e0] rounded-full overflow-hidden animate-trigger"
                        ><img
                                        :src="item.icon"
                                        class="w-[130px] h-[130px] object-cover"
                                    /></div>
                        <div
                            class="text-[14px] text-[#595959] text-center bg-[#fff] rounded-[14px] p-[10px] mt-[16px]"
                        >
                           {{ item.name }}
                        </div>
                    </div>
                </div>
                <div class="flex justify-center mt-[50px] space-x-[40px]">
                    <a-button
                        type="primary"
                        shape="circle"
                        style="height: 60px; width: 60px; font-size: 20px"
                        :icon="h(LeftOutlined)"
                    />

                    <a-button
                        type="primary"
                        shape="circle"
                        style="height: 60px; width: 60px; font-size: 20px"
                        :icon="h(RightOutlined)"
                    />
                </div>
            </div>
        </div>

        <!-- 底部认证 -->
        <div
            style="
                background: linear-gradient(
                    180deg,
                    #dcdbdf 0%,
                    #e8e8e9 45%,
                    #e2e2e4 86%,
                    #d3d3d3 100%
                );
            "
            class="py-[60px]"
        >
            <div class="w-[1200px] mx-auto text-center">
                <div class="text-[42px] font-400 mb-[20px] animate-trigger">
                    世界同步，营养中国
                </div>
                <div
                    class="text-[24px] font-100 text-[#666] mb-[40px] animate-trigger"
                >
                    严谨认证，以效可靠<br />
                    安全可靠零经络副作用
                </div>
                <div class="flex justify-center gap-[20px] mb-[40px]">
                    <div
                        v-for="i in biaozhiList"
                        :key="i"
                        class="w-[40px] h-[40px] animate-trigger"
                    >
                        <img w-full h-full :src="i" alt="" />
                    </div>
                </div>
                <div class="flex justify-center gap-[38px] mb-[-25px]">
                    <div
                        v-for="i in zhuanliList"
                        :key="i"
                        class="w-[200px] h-[280px] bg-[#e0e0e0] animate-trigger"
                    >
                        <img w-full h-full :src="i" alt="" />
                    </div>
                </div>
            </div>
            <div class="h-[50px] bg-[#f2f1f6]"></div>
            <div class="w-[1200px] mx-auto mt-[40px] mb-[40px] text-center">
                <div class="flex justify-center gap-[38px] mb-[-25px]">
                    <div
                        v-for="i in zhuanliListTips"
                        :key="i"
                        class="w-[200px] animate-trigger"
                    >
                        {{ i }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, h } from 'vue'
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue'

import biaozhi_1 from '../../assets/images/values/biaozhi_1.png'
import biaozhi_2 from '../../assets/images/values/biaozhi_2.png'
import biaozhi_4 from '../../assets/images/values/biaozhi_4.png'
import biaozhi_5 from '../../assets/images/values/biaozhi_5.png'

import zhuanli_1 from '../../assets/images/values/zhuanli_1.png'
import zhuanli_2 from '../../assets/images/values/zhuanli_2.png'
import zhuanli_3 from '../../assets/images/values/zhuanli_3.png'
import zhuanli_4 from '../../assets/images/values/zhuanli_4.png'
import zhuanli_5 from '../../assets/images/values/zhuanli_5.png'

import h_1 from '../../assets/images/values/h_1.png'
import h_2 from '../../assets/images/values/h_2.png'

interface StatisticsItem {
    number: string
    unit: string
    text: string
    label: string
}
const list: any[] = [
    { name: '玫瑰果籽提取', icon: "https://oss.acehls.com/obj/mggz.png",},
    { name: '金枪鱼肽粉', icon: "https://oss.acehls.com/obj/jinqiangyu.png", },
    { name: '百香果浓缩粉', icon: "https://oss.acehls.com/obj/baixiangguo.png", },
    { name: '枸杞提取物', icon: "https://oss.acehls.com/obj/gouqi.png",  },
    { name: '瓜拉纳提取', icon: "https://oss.acehls.com/obj/gualana.png",  },
    { name: '柑橘果粉', icon: "https://oss.acehls.com/obj/gouqi.png",  },
    { name: '红鲷鱼胶原...', icon: "https://oss.acehls.com/obj/ganju.png",  },
    { name: '佛手', icon: "https://oss.acehls.com/obj/foshou.png",  },
    { name: '裸藻粉', icon: "https://oss.acehls.com/obj/luozao.png",  },
    { name: '菊花提取', icon: "https://oss.acehls.com/obj/juhua.png",  },
    { name: '姜黄', icon: "https://oss.acehls.com/obj/jianghuang.png",  },
    { name: '藏红花提取', icon: "https://oss.acehls.com/obj/zanghonghua.png",  },
    { name: '红葡萄浓缩粉', icon: "https://oss.acehls.com/obj/putao.png",  },
    { name: '鲑鱼鼻软骨...', icon: "https://oss.acehls.com/obj/guiyubi.png",  },
    { name: '硌氨酸', icon: "https://oss.acehls.com/obj/ansuan.png",  },
    { name: '关山樱花浓缩粉', icon: "https://oss.acehls.com/obj/yinghua.png",  },
    { name: '红葡萄酵母..', icon: "https://oss.acehls.com/obj/putaojiaomu.png",  },
    { name: '黑醋栗提取物', icon: "https://oss.acehls.com/obj/heicu.png",  },
    { name: '黄精提取物', icon: "https://oss.acehls.com/obj/huangjing.png",  },
    { name: '鲣鱼弹性蛋白肽', icon: "https://oss.acehls.com/obj/danbaitai.png",  },
    { name: '接骨木莓', icon: "https://oss.acehls.com/obj/jiegu.png",  },
]
const statisticsList: StatisticsItem[] = [
    { number: '25', unit: '+', text: '国家', label: 'COUNTRY' },
    { number: '500', unit: '+', text: '品牌植物成分', label: 'COMPONENT' },
    { number: '1000', unit: '+', text: '专利', label: 'PATENT' },
    { number: '500', unit: '+', text: '临床验证', label: 'CLINICAL VALIDATION' }
]

const biaozhiList = ref([biaozhi_1, biaozhi_2, biaozhi_4, biaozhi_5])
const zhuanliList = ref([zhuanli_1, zhuanli_2, zhuanli_3, zhuanli_4, zhuanli_5])
const zhuanliListTips = ref([
    'DR7中文专利',
    'CABA韩国专利',
    '记忆力专利',
    '担子菌抗癌增强免疫',
    '植物乳杆菌'
])

const animatedNumbers = ref(statisticsList.map(() => 0))
const observer = ref<IntersectionObserver | null>(null)

const animateNumber = (index: number, target: number) => {
    const duration = 2000
    const startTime = Date.now()
    const startValue = 0

    const updateNumber = () => {
        const currentTime = Date.now()
        const elapsed = currentTime - startTime

        if (elapsed < duration) {
            const progress = 1 - Math.pow(1 - elapsed / duration, 2)
            animatedNumbers.value[index] = Math.round(
                startValue + (target - startValue) * progress
            )
            requestAnimationFrame(updateNumber)
        } else {
            animatedNumbers.value[index] = target
        }
    }

    requestAnimationFrame(updateNumber)
}

onMounted(() => {
    observer.value = new IntersectionObserver(
        entries => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('animate-in')

                    // 修改选择器以匹配新的结构
                    const statsContainer = document.querySelector(
                        '.statistics-section'
                    )
                    if (statsContainer?.contains(entry.target)) {
                        const index = Array.from(
                            statsContainer.children
                        ).indexOf(entry.target)
                        if (index !== -1) {
                            animateNumber(
                                index,
                                parseInt(statisticsList[index].number)
                            )
                        }
                    }
                }
            })
        },
        {
            threshold: 0.1
        }
    )

    // 监听所有需要动画的元素
    document.querySelectorAll('.animate-trigger').forEach(el => {
        observer.value?.observe(el)
    })
})

onUnmounted(() => {
    if (observer.value) {
        observer.value.disconnect()
    }
})
</script>

<style lang="less" scoped>
.animate-trigger {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.animate-in {
    opacity: 1;
    transform: translateY(0);
}
.top-banner {
    background-image: url(../../assets/images/values/bg22.png);
    background-size: 1324px 455px;
    background-position: bottom;
    background-repeat: no-repeat;
}

.banner {
    .animate-trigger {
        &:nth-child(1) {
            transition-delay: 0.2s;
        }
        &:nth-child(2) {
            transition-delay: 0.4s;
        }
    }
}

.statistics-section {
    .animate-trigger {
        &:nth-child(1) {
            transition-delay: 0.1s;
        }
        &:nth-child(2) {
            transition-delay: 0.2s;
        }
        &:nth-child(3) {
            transition-delay: 0.3s;
        }
        &:nth-child(4) {
            transition-delay: 0.4s;
        }
    }
}

.grid {
    .animate-trigger {
        .loop(@i) when (@i <= 21) {
            &:nth-child(@{i}) {
                transition-delay: (@i * 0.1s);
            }
            .loop(@i + 1);
        }
        .loop(1);
    }
}

.flex.justify-center {
    .animate-trigger {
        .loop(@i) when (@i <= 5) {
            &:nth-child(@{i}) {
                transition-delay: (@i * 0.1s);
            }
            .loop(@i + 1);
        }
        .loop(1);
    }
}
</style>
